<template>

	<div class="jh-k">
      <img src="" />
		<p class="username-k">用户名</p>
		<div class="lt-k">
			<p type="text" class="left-k ltk"></p>
			<div class="clear"></div>
			<p type="text" class="right-k ltk"></p>
		</div>
 </div> 
</template>

<script>
	export default{
		name:'Chatinteractionzj'
	}
</script>

<style scoped>
	.clear:after{
		content:'.';
		height:30px;
		display: block;
		overflow: hidden;
		visibility: hidden;
		clear: both;		
	}
	.jh-k{
		width: 330px;
		height: 362px;
		line-height: 20px;
		border-radius: 12px;
		background-color: rgba(225, 225, 225, 1);
		margin: auto;
	   bottom: -450px;
		position: relative;
	}
	.jh-k img{	
		width: 80px;
		height: 80px;
		line-height: 20px;
		background-color: rgba(210, 210, 210, 1);
		border-radius: 50%;
		position: absolute;
		overflow: hidden;
		left: 125px;
		top: -39px;
	}
	.username-k{		
		width: 330px;
		height: 20px;
		color: rgba(102, 102, 102, 1);
		font-size: 14px;
		text-align: center;
	   position: absolute;
		top: 50px;
	}
	.lt-k{
		width: 94%;
		height: 248px;
		position: absolute;
		top: 110px;
		padding: 0 10px
	}
	.lt-k .ltk{
		width: 229px;
		height: 50px;
		line-height: 20px;
		border-radius: 8px;
		background-color: rgba(206, 206, 206, 1);
		text-align: center;
		border:none;
	}
	.left-k{
		float: left;
	}
	.right-k{
		float: right;
	}
	
</style>
